<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>数据填报</title>

    <link rel='stylesheet' href='luckysheet/plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='luckysheet/plugins/plugins.css' />
    <link rel='stylesheet' href='luckysheet/css/luckysheet.css' />
    <link rel='stylesheet' href='luckysheet/assets/iconfont/iconfont.css' />
    <link rel="stylesheet" href="layui/css/layui.css">

</head>
<body>

<div>
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">&nbsp;填报模板：</label>
                <div class="layui-input-block">
                    <select id="fillTemplete" lay-filter="readSelectTemplete">
                        <option value="-1">请选择填报模板</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="saveDraft">暂存</button>
                <button class="layui-btn" lay-submit="" lay-filter="commitData">提交</button>
            </div>
            </div>
            <hr class="layui-bg-green" style="margin-left:10px;width: 95%">
    </form>
</div>

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:96%;height:87%;"></div>

<script src="layui/layui.js"></script>
<script src="luckysheet/plugins/js/plugin.js"></script>
<script src="luckysheet/luckysheet.umd.js"></script>
<script src="fill/fill.common.js"></script>
<script src="fill/fill.plugins.js"></script>
<script src="fill/fill.sheet.js"></script>

<script>
    let fillDataInfo = null;
    let templeteId = null;
    let filldataId = null;
    $(document).ready(function(){
        //初始化下拉
        let canFillTemplete = window.localStorage.getItem("canFillTempleteList");
        if(canFillTemplete==undefined||canFillTemplete==null||canFillTemplete.length==0) {
            noTempleteTip();
        }
        let canFillTempleteList = JSON.parse(canFillTemplete);
        if(canFillTempleteList!=undefined&&canFillTempleteList!=null&&canFillTempleteList.length>0){
            $('#fillTemplete').empty();
            $('#fillTemplete').append("<option value='-1'>请选择填报模板</option>");
            for(let i=0;i<canFillTempleteList.length;i++){
                $('#fillTemplete').append("<option value='" + canFillTempleteList[i].templeteId + "'>" + canFillTempleteList[i].templeteName + "</option>");
            }

            let updateTempleteInfo = window.localStorage.getItem("updateTempleteInfo");
            if(updateTempleteInfo!=undefined&&updateTempleteInfo!=null&&updateTempleteInfo.length>0){
                fillDataInfo = JSON.parse(updateTempleteInfo);
                templeteId = fillDataInfo.templeteId;
                filldataId = fillDataInfo.filldataId;
                $('#fillTemplete').val(templeteId);
                $("#fillTemplete").prop('disabled', true);
                layui.use(['form'], function(){
                    let form = layui.form;
                    form.render('select');
                });
            }
            
            if(filldataId!=undefined&&filldataId!=null&&filldataId.length!=0){
                readData();
            }

            //系统扩展插件
            $("#expends").html(expendPlugins);
            //初始化插件
            initPluginsSelect(null);
        }else{
            noTempleteTip();
        }
    });

    layui.use(['form'], function(){
        let form = layui.form
           ,layer = layui.layer;

        //读取填报模板
        form.on('select(readSelectTemplete)', function(data){
            if(data.value!=undefined&&data.value!=null&&data.value.length>0&&data.value!="-1"){
                readTemplete();
            }else{
                luckysheet.destroy();
            }
        });

        //保存草稿
        form.on('submit(saveDraft)', function(data){
            saveDraft();
            return false;
        });

        //提交数据
        form.on('submit(commitData)', function(data){
            commitData();
            return false;
        });
    });

    function noTempleteTip(){
        layui.use(['layer'], function(){
            let layer = layui.layer;
            layer.alert('当前未获取到可填报模板，不可填报，请稍后重试！', {title: '提示',icon: 4}, 
                function(index){
                    window.parent.closeCommitData(true);
                    layer.close(index);
                }
            );
        });
    }

    function readTemplete(){
        let templeteId = $('#fillTemplete').val();
        let params = {
                "templeteId": $('#fillTemplete').val()
            };
        $.ajax({
            url: getUrl("/report/templetedesign/detail"),
            type: "post",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(params),
            dataType: "json",
            timeout: 10000,
            headers: {'Authorization': authorization},
            success: function (res) {
                if(res.code==='200') {
                    let templete = res.data;
                    cellrelations = JSON.parse(templete.templeteCellrelation);
                    protectCellData = JSON.parse(templete.templeteProtect);
                    if(protectCellData==undefined||protectCellData==null){
                        protectCellData = {};
                    }
                    optionsFill.data = JSON.parse(templete.templeteContent);
                    luckysheet.create(optionsFill);
                    // luckysheet.setSheetActive(0);
                }else{
                    layer.msg(res.msg, {icon: 2});
                }
            },
            error: function (data) {
                //停止延时动画
                let statusText = data.statusText;
                let status = data.status;
                if (statusText == "timeout") {
                    layer.msg("请求超时，请稍后再试！", {icon: 5});
                } else {
                    if (status == undefined || status == null || status.length == 0) {
                        layer.msg("网络异常，请稍后再试！(-1)", {icon: 5});
                    } else {
                        layer.msg("网络异常，请稍后再试！(" + status + ")", {icon: 5});
                    }
                }
            }
        });
    }

    function readData(){
        layui.use(['form','layer'], function(){
            let form = layui.form
                ,layer = layui.layer;
            let params = {
                "templeteId": templeteId,
                "filldataId": filldataId
            };
            $.ajax({
                url: getUrl("/report/filldata/detail"),
                type: "post",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(params),
                dataType: "json",
                timeout: 10000,
                headers: {'Authorization': authorization},
                success: function (res) {
                    if(res.code==='200'){
                        cellrelations = JSON.parse(res.data.templeteCellrelation);
                        protectCellData = JSON.parse(res.data.templeteProtect);
                        if(protectCellData==undefined||protectCellData==null){
                            protectCellData = {};
                        }
                        optionsFill.data = JSON.parse(res.data.fillContent);
                        luckysheet.create(optionsFill);
                    }else{
                        layer.msg(res.msg, {icon: 2});
                    }
                },
                error: function (data) {
                    //停止延时动画
                    let statusText = data.statusText;
                    let status = data.status;
                    if (statusText == "timeout") {
                        layer.msg("请求超时，请稍后再试！", {icon: 5});
                    } else {
                        if (status == undefined || status == null || status.length == 0) {
                            layer.msg("网络异常，请稍后再试！(-1)", {icon: 5});
                        } else {
                            layer.msg("网络异常，请稍后再试！(" + status + ")", {icon: 5});
                        }
                    }
                }
            });
        });
    }

    function saveDraft(){
        layui.use(['form','layer'], function(){
            let form = layui.form
               ,layer = layui.layer;

            let templeteId = $('#fillTemplete').val();
            if(templeteId!=undefined&&templeteId!=null&&templeteId.length>0&&templeteId!="-1"){
                let json = {
                    "templeteId": templeteId,
                    "filldataId": filldataId,
                    "fillContent": JSON.stringify(luckysheet.getAllSheets())
                };
                $.ajax({
                    url: getUrl("/report/filldata/savedraft"),
                    type: "post",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(json),
                    dataType: "json",
                    timeout: 10000,
                    headers: {'Authorization': authorization},
                    success: function (res) {
                        if(res.code=='200'){
                            filldataId = res.data;
                            $("#fillTemplete").prop('disabled', true);
                            form.render('select');
                            layer.msg('草稿已保存！', {icon: 1});
                        }else{
                            layer.msg(res.msg, {icon: 2});
                        }
                    },
                    error: function (data) {
                        //停止延时动画
                        let statusText = data.statusText;
                        let status = data.status;
                        if (statusText == "timeout") {
                            layer.msg("请求超时，请稍后再试！", {icon: 5});
                        } else {
                            if (status == undefined || status == null || status.length == 0) {
                                layer.msg("网络异常，请稍后再试！(-1)", {icon: 5});
                            } else {
                                layer.msg("网络异常，请稍后再试！(" + status + ")", {icon: 5});
                            }
                        }
                    }
                });
            }else{
                layer.msg("请先选择需要填报的模板！", {icon: 2});
            }
        });
    }

    function commitData(){
        layui.use(['form','layer'], function(){
            let form = layui.form
               ,layer = layui.layer;

            let templeteId = $('#fillTemplete').val();
            if(templeteId!=undefined&&templeteId!=null&&templeteId.length>0&&templeteId!="-1"){
                layer.confirm('提交后数据无法修改，确定提交吗?', {icon: 3, title:'提示'}, function(index){
                    let json = {
                        "templeteId": templeteId,
                        "filldataId": filldataId,
                        "fillContent": JSON.stringify(luckysheet.getAllSheets())
                    };
                    $.ajax({
                        url: getUrl("/report/filldata/commit"),
                        type: "post",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify(json),
                        dataType: "json",
                        timeout: 10000,
                        headers: {'Authorization': authorization},
                        success: function (res) {
                            if(res.code=='200'){
                                layer.alert('数据已提交！', function(index){
                                    window.parent.closeCommitData(false);
                                    layer.close(index);
                                }); 
                            }else{
                                layer.msg(res.msg, {icon: 2});
                            }
                        },
                        error: function (data) {
                            //停止延时动画
                            let statusText = data.statusText;
                            let status = data.status;
                            if (statusText == "timeout") {
                                layer.msg("请求超时，请稍后再试！", {icon: 5});
                            } else {
                                if (status == undefined || status == null || status.length == 0) {
                                    layer.msg("网络异常，请稍后再试！(-1)", {icon: 5});
                                } else {
                                    layer.msg("网络异常，请稍后再试！(" + status + ")", {icon: 5});
                                }
                            }
                        }
                    });
                    layer.close(index);
                });
            }else{
                layer.msg("请先选择需要填报的模板！", {icon: 2});
            }
        });
    }

</script>
</body>

<div id="extendPlugins" style="margin-top: 3px;">
    <div class="layui-form">
        <div id="pluginsSelect" style="display: none;" class="layui-form-item">
            <label class="layui-form-label">选择插件：</label>
            <div class="layui-input-block" style="width: 200px;">
                <select id="selectedPlugins" lay-filter="showSelectedPlugin">
                </select>
            </div>
            <hr class="layui-bg-green" style="margin-left:10px;width: 95%">
        </div>
    </div>
    <div id="expends" class="layui-form"></div>
</div>

</html>
